/**
 * @description 邀友
 */
import style from './styles/Home.less';
import classnames from "classnames";
import React, { Component } from 'react';
import { Toast, Popup } from 'wd-mobile';
import wxShare from "commons/wxShare";
import util from "commons/util";
import ShareOrPayLayer from "components/ShareOrPayLayer";
//api
import * as invite from 'api_xukaiyu/app/user_invite';
import { inviteRecommendGoods } from 'api_liuhaojie/app/goods';
import { share_conf } from 'api_xukaiyu/app/content';


const mockData = [
    'A平安小惠 已获得 65元红包',
    '稚气少女心 已获得 83元红包',
    '听风念旧 已获得 120元红包',
    'AA情缘水果 已获得 28元红包',
    '倦眼朦胧 已获得 36元红包',
    '何时复西归 已获得 41元红包',
    '王丽芳 已获得 40元红包',
    '金遇见 已获得 65元红包',
    '扣肉啊扣肉 已获得 123元红包',
    'LWLing 已获得 88元红包',
    '啊啊啊是我 已获得 189元红包',
    '丢弃的猫 已获得 29元红包',
    'ICE 已获得 48元红包',
    '奥斯卡~ 已获得 77元红包',
    '冰冰 已获得 90元红包',
    '你大爷还是你大爷 已获得 80元红包',
    'Lucky-hc 已获得 92元红包',
    'Celery 已获得 102元红包',
    '老曹 已获得 209元红包',
    '余姚洁 已获得 232元红包',
    'L.ZL 已获得 109元红包',
    '马腾是大树 已获得 167元红包',
    '浙大吴彦祖 已获得 198元红包'
]

class Home extends React.Component {
    constructor() {
        super();
        this.state = {
            shopList: [],//商品列表
            visible: false,//分享显示
            showRule: false,//显示规则
            inviteCount: {},//查询邀请统计
            showShareOrPayLayer: false,
        };
    }

    componentDidMount() {
        //查询邀请统计
        invite.invite_count().then(data => {
            this.setState({
                inviteCount: data.data
            })
        })

        //推荐商品列表
        inviteRecommendGoods().then(data => {
            this.setState({
                shopList: data.data || []
            })
        })
        //轮播消息
        new Swiper(`.${style.dateSwiperContainer}`, {
            direction: 'vertical',
            speed: 200,
            autoplay: {
                delay: 2000
            },
            loop: true,
        });
    }


    render() {
        let { shopList, inviteCount } = this.state;
        return (<div className={style.Home}>
            <div className={style.rule} onClick={() => {
                this.setState({
                    showRule: true
                })
            }}></div>
            <div className={style.headTips}>每邀请一位新用户最高可得99元</div>
            <div className={style.mianInfo}>
                <div className={style.notice}>
                    <div className={style.dateSwiper}>
                        <div className={style.dateSwiperContainer}>
                            <div className="swiper-wrapper">
                                {
                                    mockData.map((item, index) => {
                                        return (
                                            <div key={index} className="swiper-slide">
                                                <span>{item}</span>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </div>

                </div>
                <div className={style.inviteBtn} onClick={() => {
                    //分享配置
                    share_conf().then(data => {
                        this.setState({
                            showShareOrPayLayer: true,
                        }, () => {
                            // 设置分享到商品
                            let shareData = {};
                            let pathNameArr = location.pathname.split("/");
                            pathNameArr.pop();
                            shareData.link = data.data.url.includes('?') ? (data.data.url + `&uid=${localStorage.getItem('UserId')}`) : (data.data.url + `?uid=${localStorage.getItem('UserId')}`);
                            shareData.title = `${data.data.title}`;
                            shareData.desc = `${data.data.content}`;
                            shareData.imgUrl='https://m.shwzfa.cn/static/img/share_5yuan.png';
                            wxShare(shareData);
                        })
                    })

                }}></div>
                <div className={style.myaAward}>
                    <div className={style.allRed} onClick={() => {
                        location.href = "./redpacket.html"
                    }}>查看所有红包 ></div>
                    <div className={style.awardDetail}>
                        <div className={style.hasInvite}>
                            <div className={style.title}>已邀请人数</div>
                            <div className={style.num}>{inviteCount.inviteCount} <span>人</span></div>
                        </div>
                        <div className={style.unfreeze} onClick={() => {
                            location.href = `./fightRedEnvelope.html#/MyFriend`;
                        }}>
                            <div className={style.title}>待解冻<span className={style.icon} onClick={(e) => {
                                e.stopPropagation();
                                Toast.info('受邀好友在30天内完成下首单并确认收货，即可解冻该红包。');
                            }}></span></div>
                            <div className={style.num}>{inviteCount.freezingCount} <span>人</span> <span className={style.check}></span></div>
                        </div>
                        <div className={style.hasGet}>
                            <div className={style.title}>已获得</div>
                            <div className={style.num}>{inviteCount.totalRedPacketAmount} <span>元</span></div>
                        </div>
                    </div>
                    <div className={style.loseEfficacy}>{inviteCount.overdueAmount}元已失效</div>
                </div>
                <div className={style.shopList}>
                    {
                        shopList.length ? shopList.map((item, index) => {
                            return <div key={index} className={style.shopItem} onClick={() => {
                                location.href = `./goods.html#/Detail/${item.id}`;
                                util.checkWechatEnv((res) => {
                                    if (res == 'miniprogram') {
                                        wx.miniProgram.navigateTo({
                                            url: `/pages/goodsDetail/goodsDetail?id=${item.id}`
                                        })
                                    } else {
                                        location.href = `${location.href.includes("shwzfa.cn") ? "//m.shwzfa.cn" : "//m.shwzfa.cn"}/goods.html#/Detail/${item.id}`;
                                    }
                                })
                            }}>
                                <div className={style.img}>
                                    <img src={item.goodsIcon} alt="" />
                                </div>
                                <div className={style.info}>
                                    <div className={style.title}>{item.skuName}</div>
                                    <div className={classnames(style.priceInfo, style.clearfix)}>
                                        <div className={style.moeny}>
                                            <div className={style.subTitle} style={{ visibility: item.isNoob == 1 ? "visible" : "hidden" }}>首单价</div>
                                            <div className={style.price}>￥{item.price} <span>￥{item.recommendPrice}</span></div>
                                        </div>
                                        <div className={style.recommend}>
                                            <div className={style.sellNum}>已售{item.soldNum}件</div>
                                            <div className={style.btn} onClick={(e) => {
                                                e.stopPropagation();
                                                this.setState({
                                                    showShareOrPayLayer: true
                                                }, () => {
                                                    // 设置分享到商品
                                                    let shareData = {};
                                                    let pathNameArr = location.pathname.split("/");
                                                    pathNameArr.pop();
                                                    shareData.link = location.origin + pathNameArr.join("/")  + `/goods.html#/Detail/${item.id}`;
                                                    shareData.title = `在吗？给你推荐${item.skuName}`;
                                                    shareData.desc = `${item.skuName}已售${item.soldNum}件，库存不多，悄悄分享给你`;
                                                    shareData.imgUrl = item.goodsIcon;
                                                    wxShare(shareData);
                                                })
                                            }}>推荐给好友</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }) : ''
                    }
                </div>
            </div>
            <div className={style.bottomLogo}></div>
            <Popup maskStyle={{ background: 'rgba(0,0,0,.3)' }} mask={true} animation="bottom" offset={{ top: 0, left: 0, right: 0, bottom: 0 }} visible={this.state.showRule}>
                <div className={style.rules}>
                    <div className={style.close} onClick={() => {
                        this.setState({
                            showRule: false
                        })
                    }}></div>
                </div>
            </Popup>
            <ShareOrPayLayer show={this.state.showShareOrPayLayer} onClick={() => {
                this.setState({
                    showShareOrPayLayer: false
                })
            }} />
        </div>
        );
    }
}

/**
 * 根据window.devicePixelRatio获取像素比
 */
function DPR() {
    if (window.devicePixelRatio && window.devicePixelRatio > 1) {
        return window.devicePixelRatio;
    }
    return 1;
}
/**
 *  将传入值转为整数
 */
function parseValue(value) {
    return parseInt(value, 10);
};



export default Home;